<script lang="ts">
import { TeleportAntdModalFooter } from '~comp/antd-assist';
import type { BonusDetailType } from '~/components-business/global-popups/newWallet/ts/depositBonusInfoHook';
import { getMaxRateText, toBnInt, toDecimalPlaces } from '~/components-business/global-popups/newWallet/ts/utils';
import Countdown from './Countdown.vue';

export const welcomeBonusPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./WelcomeBonusPoup.vue')),
  {
    title: toRef(() => $t('e1QCiWLxXcGqes7Lj4Hqn')),
    wrapClassName: 'ant-cover__Modal-drawer ant-cover__Modal-rank __screen-drawer',
    centered: true,
    footer: null,
    destroyOnClose: true,
  },
);

export interface WelcomeBonusPopupProps {
  detailData?: BonusDetailType;
  decimals?: number;
  isFiat?: boolean;
  onClose?: () => void;
}
</script>

<script lang="ts" setup>
const props = defineProps<WelcomeBonusPopupProps>();

const getListRef = computed(() => props.detailData?.bonusesDetails || []);

const appStore = useAppStore();

const authed = useAuthed();

const isCountDownFinish = ref(false);

function onCountDownFinish() {
  isCountDownFinish.value = true;
}

function getTAmountProps(bnV: ReturnType<typeof bignumber>) {
  const dec = props.decimals || 0;
  const bn = props.isFiat ? toBnInt(bnV) : toDecimalPlaces(bnV, false, dec < 3 ? 2 : dec);
  return {
    class: { '!hidden': bn.lte(0) || !authed.value },
    value: bn,
    decimals: bn.decimalPlaces() ?? void 0,
  };
}

const getMaxBoostRateTextRef = computed(() => getMaxRateText(getListRef.value.map(x => x.bnBoostRate || bignumber(0))));
</script>

<template>
  <div class="grid mb-1 gap-3 text-sm">
    <div v-if="detailData?.available && detailData?.timeInfo?.isInBoostExpireSecond && !isCountDownFinish && getListRef.length > 0" class="rounded-2 bg-brand p-2.5 text-center">
      <div>{{ $t('qHItEuwpUGhRGy49WzDt') }}</div>
      <div class="flex-center gap-1.5">
        <span>{{ $t('j5mlMzlIb9e0eY6OTp0Xg') }}</span>
        <i class="i-local:bonus__card-icon" />
        <div class="text-4 font-900">
          {{ getMaxBoostRateTextRef }}
        </div>
        <div class="divider-v-gradual-white" />
        <Countdown
          :value="detailData?.timeInfo?.boostExpireDate"
          itemClassName="rounded-1 px-1 py-[1px] bg-red-800 text-[13px] text-sys-text-head"
          hiddenTopText
          @finish="onCountDownFinish"
        />
      </div>
    </div>

    <div v-for="(item, idx) of getListRef " :key="idx" class="grid grid-cols-2 text-3.5 text-sys-text-body">
      <p>
        {{ $t('vx6VUiUjIyv07dbnzPe6O') }} <span class="text-white">{{ item.usdText }}</span>
      </p>
      <p class="ml-auto flex items-center gap-1 text-right">
        <TAmount v-bind="getTAmountProps(item.bnDepositAmount)" :symbol="detailData?.currency" format="fixed-dec" colored="full" iconPos="left" />
      </p>
      <div v-if="detailData?.timeInfo?.isInBoostExpireSecond && !isCountDownFinish" class="col-span-2 mt-1 rounded-2 bg-sys-layer-a px-3 py-2.5 text-4">
        <span class="text-brand line-through"><em class="text-sys-text-body">{{ item.bonustRateText }}</em></span> <span class="text-white">{{ item.boostRateText }}</span> {{ $t('iHqjwGMglAmn9yHbLh3jR') }}
      </div>
      <div v-else class="col-span-2 mt-1 rounded-2 bg-sys-layer-a px-3 py-2.5 text-4">
        <span class="text-white">{{ item.bonustRateText }}</span> {{ $t('iHqjwGMglAmn9yHbLh3jR') }}
      </div>
    </div>

    <div class="grid grid-cols-2">
      <p class="text-3.5 text-sys-text-body">
        {{ $t('rc7bshKdgApjQys4Sv9Y') }}
      </p>
      <p class="text-right text-4">
        {{ detailData?.maxInfo?.usdText }}
      </p>
      <div class="col-span-2 divider-h-gradual mb-0 ml-auto mr-auto w-88%" />
    </div>

    <div class="text-4.5">
      {{ $t('ml9XVhsQdBdBPhvHwTd') }}
    </div>
    <TCard class="!p-3">
      <div class="grid grid-cols-2">
        <p class="text-3.5 text-sys-text-body">
          {{ $t('an0xB3Kronuhw2ztsiKw3') }}
        </p>
        <p class="text-right text-4">
          {{ detailData?.wagerDetail?.bnRate ? `x${detailData?.wagerDetail?.bnRate?.toFormat() ?? ''}`.trim() : '-' }}
        </p>
        <div class="col-span-2 divider-h-gradual ml-auto mr-auto w-88%" />
      </div>
      <div class="grid grid-cols-2">
        <p class="text-3.5 text-sys-text-body">
          {{ $t('bby4AfOmqE7SWmH4WF4') }}
        </p>
        <p class="text-right text-4">
          {{ detailData?.wagerDetail?.usdMinAmountText || '-' }}
        </p>
        <div class="col-span-2 divider-h-gradual ml-auto mr-auto w-88%" />
      </div>
      <div class="grid grid-cols-2 mb-4">
        <p class="text-3.5 text-sys-text-body">
          {{ $t('5r2MhfT0z6pt0GejindO') }}
        </p>
        <p class="text-right text-4">
          {{ detailData?.wagerDetail?.usdMaxAmountText || '-' }}
        </p>
      </div>
      <div class="mt-2 flex gap-2 rounded-2 bg-sys-layer-c p-3 text-sys-text-body">
        <i class="i-local:warn" />
        <I18nT keypath="yNnX6kTJv4XcBDtMzoh" tag="p">
          <template #name>
            {{ appStore.appName }}
          </template>
        </I18nT>
      </div>
    </TCard>

    <TeleportAntdModalFooter footerClass="!max-w-none">
      <AButton
        class="ant-cover__Button-3d-gray w-full flex-1"
        type="primary"
        @click="onClose"
      >
        {{ $t('pFexkGv2pL4Nl4GmT9ZZm') }}
      </AButton>
    </TeleportAntdModalFooter>
  </div>
</template>

<style lang="scss" scoped>
.divider-v-gradual-white {
  background-image: linear-gradient(rgba(75, 85, 99, 0.1) 0%, #dddee4 50.5%, rgba(75, 85, 99, 0.1) 100%);
  --uno: 'w-[1px] h-6 h-6';
}
</style>
